<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <button class="get">get</button> -->
    <button class="ajax">ajax</button>
</body>
<script>
    var ajaxBtn = document.getElementsByClassName("ajax")[0];


    ajaxBtn.onclick = function () {

        ajax({
            type: "get",
            url: "../php/isExistUser.php",
            data: { user: "a123123" },
            dataType: "json",
            success: function (res) {
                console.log(res);
            }
        })


        // var id = 1;
        // var ch = 55;
        // var mh = 66;
        // var en = 77;

        // ajax({
        //     type: "post",
        //     url: "../php/updateGradeByIdPost.php",
        //     // data: { id: id, ch: ch, mh: mh, en: en },
        //     data: { id, ch, mh, en },
        //     // async:true,
        //     dataType: "json",
        //     success: function (res) {
        //         console.log("请求结束", res);
        //         var { status, msg } = res;
        //         alert(msg);
        //     },
        // })

    }

    // url      请求地址
    // data     传递的数据 (string|object)  如果是对象 => 遍历对象转化为参数数据队列
    // async    是否异步
    // dataType 接口返回的数据类型 (text(默认)/html/json)
    // success  回调函数 => 请求成功时执行的内容 (回调函数有一个形式参数  用于接收接口返回的结果)


    function ajax(options) {  // 传入一个对象作为参数    
        // debugger;
        var { type = "get", url, data = "", async = true, dataType = "text", success } = options;

        // data instanceof Object   不准确 且听下回分解
        if (typeof data == "object") {
            var str = "";
            for (var key in data) {
                var val = data[key];
                str += key + "=" + val + "&";
            }
            data = str.substring(0, str.length - 1);
            // console.log(data);
        }

        var xhr = new XMLHttpRequest();

        if (type.toLowerCase() == "get") {
            // data(是否有数据) 有: 拼接url + "?" + data 没有:直接请求url
            xhr.open("get", data ? url + "?" + data : url, async);
            xhr.send();
        } else if (type.toLowerCase() == "post") {
            xhr.open("post", url, true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }


        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                // console.log(result);
                if (dataType == "json") {  // 如果用户说 返回的数据是json => JSON.parse();
                    result = JSON.parse(result);
                }
                // console.log(result);

                // 获取接口响应的结果之后  => 用户执行的内容并不是固定的
                if (success) {
                    success(result);   // 回调函数在执行过程中 => 将请求的结果作为实际参数传入
                }

            }
        }
    }






</script>

</html>